<style lang="less" scoped>
  .fmc2ecg{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 80% 50%;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
    .no-data{
      color: #fff;
      width: 100%;
      font-size: 14px;
      height: calc(100% - 45px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

<template>
  <div class="fmc2ecg">
    <div class="fmc2ecg_title">
      <span>{{ FMC2ECGTitle }}</span>
    </div>
    <medical-charts v-if="timeLine.length > 0" :chart-id="chartId" :legend-title="legendTitle" :time-line="timeLine" :chart-data="chartData" :left-y="leftY" :right-y="rightY" class="fmc2ecg_content" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import medicalCharts from './medicalCharts'
import { getFMC2ECGRatio, getStrokeDNTRatio } from '@/api/comprehensive/FMC2ECG'
export default {
  components: {
    medicalCharts
  },
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      setInter: null,
      FMC2ECGTitle: '2、首次医疗接触至首份心电图（FMC2ECG）时间',
      chartId: 'fmc2ecg2',
      legendTitle: ['平均值', '达标率'],
      leftY: '分钟',
      rightY: '%',
      timeLine: [],
      chartData: [
        {
          name: '平均值',
          type: 'bar',
          barWidth: 20,
          data: []
        },
        {
          name: '达标率',
          type: 'line',
          yAxisIndex: 1,
          data: []
        }
      ]
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      if (this.isStrock == 'stroke') {
        this.FMC2ECGTitle = 'DNT时间及达标率'
        getStrokeDNTRatio({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              let averageData = []
              let rateData = []
              let timeLine = []
              res.data.forEach(el => {
                timeLine.push(el.timeName)
                averageData.push(el.quotaAvg)
                rateData.push(el.reachRatio)
              })
              this.timeLine = timeLine
              this.chartData = [
                {
                  name: '平均值',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true
                    // position: 'top'
                  },
                  data: averageData
                },
                {
                  name: '达标率',
                  type: 'line',
                  yAxisIndex: 1,
                  label: {
                    show: true,
                    position: 'top'
                  },
                  data: rateData
                }
              ]
            }
          }
        })
      }
    }
  }
}
</script>
